<template>
  <zh-app>
    <zh-navbar linear="left" title="应用搜索"></zh-navbar>
    <zh-sheet :margin="[0, 0]" :followTheme="true">
      <view class="flex-row flex-row-center-start">
        <zh-image :width="108" :height="108" :src="logoimg"></zh-image>
        <view class="pl-16 flex-1" style="width: 0px">
          <zh-text _class="text-weight-b" :font-size="36" label="学在东阳"></zh-text>
          <zh-text _class="opacity-6" label="东阳教育,人人向往"></zh-text>
        </view>
      </view>
      <view class="mt-10"></view>
      <zh-input placeholder="搜索应用" :border="1" showClear prefix="tmicon-search" v-model="searchText" @search="searchClick" searchLabel="搜索"></zh-input>
    </zh-sheet>
    <zh-result v-if="appList.length === 0" :showBtn="false" subTitle="请重新输入关键词"></zh-result>
    <view class="mt-20"></view>

    <zh-sheet :margin="[20, 0]" v-for="(item, appIndex) in appList" :key="item.menuId">
      <view class="flex flex-row flex-row-top-start" @click="onClick(item)">
        <view v-if="item.icon || item.iconImgUrl" class="mr-24" style="min-width: 60rpx; align-items: stretch">
          <tm-icon :color="item.color" _class="pb-10" :font-size="72" :name="item.icon || item.iconImgUrl"></tm-icon>
        </view>
        <view class="flex flex-9 flex-col wh5">
          <view class="flex flex-row flex-between">
            <zh-text color="blue" _class="text-weight-b" :fontSize="28" :label="item.title"></zh-text>
            <tm-icon color="grey" _class="pl-24 opacity-5" :fontSize="24" name="tmicon-angle-right"></tm-icon>
          </view>
          <view class="flex flex-col py-12">
            <zh-text :fontSize="26" label="东阳教育局"></zh-text>
          </view>
          <view v-if="item.labelList && labelList.length > 0" class="flex flex-row flex-1 flex-nowrap flex-row-center-start">
            <zh-tag v-for="(label, index) in item.labelList" :key="'label' + index" text outlined size="s" :shadow="0" color="red" :label="label"></zh-tag>
          </view>
        </view>
      </view>
      <view class="mt-20">
        <zh-divider color="grey-2" :margin="[0, 0]" :padding="[0, 0]" v-if="appIndex < appSize - 1"></zh-divider>
        <zh-divider color="grey" @click="onMoreClick" v-if="appIndex === appSize - 1 && state.hasNextPage" label="查看更多"></zh-divider>
        <zh-divider color="grey" v-if="appIndex === appSize - 1 && !state.hasNextPage" label="没有更多应用"></zh-divider>
      </view>
    </zh-sheet>
    <zh-message ref="messageRef" :duration="2000"></zh-message>
  </zh-app>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, computed } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import logoimg from '@/static/logo.png';
import systemConfig from '@/common/config';
import systemConfigStore from '@/store/modules/systemConfigStore';
import * as u from '@/tool/function/util';
const store = systemConfigStore();
const appList = ref([]);
const appSize = ref(0);
const searchText = ref('');
const messageRef = ref();
const state = reactive({ browserType: null, hasNextPage: true, pageNum: 1, pageSize: 10 });
// 设置响应式全局组件库配置表。
const tmcfg: any = computed(() => store);
//---------------------初始化---------------------------------------------
onLoad((obj: Object) => {
  if (typeof obj?.searchText === 'string' && obj?.key != '') {
    searchText.value = obj?.searchText;
  }
  setTimeout(function () {
    onSearch();
  }, 300);
});
const searchClick = () => {
  appList.value = [];
  state.pageNum = 1;
  state.pageSize = 10;
  onSearch();
};
function onSearch() {
  let params: any = { appId: systemConfig.appId, pageSize: state.pageSize, pageNum: state.pageNum, title: searchText.value };
  $api.common.send.post('appmenu0020', params).then((res: any) => {
    let result = res.result?.list || [];
    let list: any = [];
    if (result && result.length > 0) {
      result.forEach((item: any) => {
        if (isShowMenu(item.deviceType)) {
          list.push(item);
        }
      });
    }
    appList.value = appList.value.concat(list);
    appSize.value = appList.value.length;
    state.hasNextPage = res.result?.hasNextPage;
    if (list.length === 0 && state.hasNextPage) {
      state.pageNum = state.pageNum + 1;
      onSearch();
    }
  });
}
const isShowMenu = (deviceType: any) => {
  //是否显示
  let isShow = true;
  if (!deviceType) {
    return isShow;
  }
  let str = deviceType.toLowerCase();
  if (str.indexOf('all') != -1) {
    return isShow;
  }
  if (state.browserType) {
    if (str.indexOf(state.browserType) != -1) {
      isShow = true;
    } else {
      isShow = false;
    }
  }
  return isShow;
};
const onMoreClick = () => {
  if (state.hasNextPage) {
    state.pageNum = state.pageNum + 1;
    onSearch();
  }
};
function onClick(item: any) {
  let messageData: any = {};
  messageData.model = 'warn';
  messageData.dark = tmcfg.dark;
  if (!u.isEmpty(item)) {
    if (item.linkType) {
      if (item.linkType == 'router') {
        if (item.linkName) {
          let params: any = {};
          if (item.param1) {
            //自定义参数1为请求参数，不为空时传入
            try {
              params = JSON.parse(item.param1);
            } catch (e) {
              messageData.text = '功能配置异常，请求参数（param1）配置必须是json格式';
              messageRef.value.show(messageData);
              return;
            }
          }
          if (item.title) {
            params.headerTitle = item.title; //标题
          }
          if (item.menuId) {
            params.menuId = item.menuId; //菜单id
          }
          if (item.serviceCode) {
            params.serviceCode = item.serviceCode; //服务事项编码
          }
          if (item.serviceName) {
            params.serviceName = item.serviceName; //服务事项名称
          }
          let pages: any = uni.$tm.pages;
          let linkPath = item.linkPath;
          if (linkPath) {
            if (linkPath.startsWith('/')) {
              linkPath = linkPath.substring(1);
            }
          }

          if (linkPath && pages.get(linkPath)) {
            $router.push(item.linkPath, params);
          } else {
            messageData.text = '功能配置异常，未找到跳转页面';
            messageRef.value.show(messageData);
          }
        } else {
          messageData.text = '功能目前在测试中，尚未开放';
          messageRef.value.show(messageData);
        }
      } else if (item.linkType === 'h5' || item.linkType === 'openH5' || item.linkType === 'openh5' || item.linkType == 'h5_href') {
        if (item.linkUrl) {
          gotoOhterPage(item);
        } else {
          messageData.text = '功能目前在测试中，尚未开放';
          messageRef.value.show(messageData);
        }
      } else {
        messageData.text = '功能目前在测试中，尚未开放';
        messageRef.value.show(messageData);
      }
    } else {
      messageData.text = '功能目前在测试中，尚未开放';
      messageRef.value.show(messageData);
    }
  }
}
const gotoOhterPage = (item: any) => {
  const url = item.linkUrl;
  let messageData: any = {};
  messageData.model = 'warn';
  messageData.dark = store.dark;
  if (url) {
    let params: any = {};
    if (item.title) {
      params.headerTitle = item.title; //标题
    }
    if (item.menuId) {
      params.menuId = item.menuId; //菜单id
    }
    if (item.serviceCode) {
      params.serviceCode = item.serviceCode; //服务事项编码
    }
    if (item.serviceName) {
      params.serviceName = item.serviceName; //服务事项名称
    }
    params.url = encodeURIComponent(url);
    params.tokenFlag = item.tokenFlag;
    if (item.linkPath) {
      $router.push(item.linkPath, params);
    } else {
      $router.push('/pages/system/webWiew/webView', params);
    }
  } else {
    messageData.text = '没有传入跳转的链接';
    messageRef.value.show(messageData);
  }
};
</script>
